<template>
    <div class="repertory-list">
        <el-card class="!border-none mb-4" shadow="never">
            <el-form
                class="mb-[-16px]"
                :model="queryParams"
                inline
                label-width="100px"
            >
                <el-form-item label="客户姓名" prop="customer">
                    <el-input class="w-[280px]" v-model="queryParams.customer" clearable placeholder="请输入客户姓名" />
                </el-form-item>
                <el-form-item label="电话" prop="mobile">
                    <el-input class="w-[280px]" v-model="queryParams.mobile" clearable placeholder="请输入电话" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4 table-card" shadow="never" ref="cardBottomRef">
            <div class="flex" style="margin-bottom: 10px;gap: 10px;">
                <router-link :to="{path: getRoutePath('repertory.add')}">
                    <el-button type="primary" >入库</el-button>
                </router-link>
                <router-link :to="{path: getRoutePath('repertory.edit')}">
                    <el-button type="primary" >出库</el-button>
                </router-link>
            </div>
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" min-width="120" align="center"/>
                <el-table-column label="商品名称" prop="name" min-width="120" align="center"/>
                <el-table-column label="客户姓名" prop="customer" min-width="120" align="center"/>
                <el-table-column label="客户手机号" prop="mobile" min-width="120" align="center"/>
                <el-table-column label="库存数量" prop="stock" min-width="120" align="center"/>
                <!-- <el-table-column label="备注" prop="remark" min-width="120" align="center"/> -->
                <!-- <el-table-column label="订单状态" prop="order_status" min-width="120" align="center">
                    <template #default="{ row }">
                        <span v-if="row.order_status == 6">已到货</span>
                        <span v-if="row.order_status == 7">已安装</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" width="260" fixed="right" align="center">
                    <template #default="{ row }">
                        <el-button link type="primary"
                            @click="handleOperate(row, 'add')">
                            入库
                        </el-button>
                        <el-button link type="primary"
                            @click="handleOperate(row, 'edit')">
                            出库
                        </el-button>
                        <el-button link type="primary">
                            <router-link :to="{
                                path: getRoutePath('repertory.log'),
                                query: {
                                    id: row.id
                                }
                            }">
                                库存日志列表
                            </router-link>

                        </el-button>
                        <el-button link type="danger"
                            @click="handleDelete(row.id)">
                            删除
                        </el-button>
                        <!-- <WordUploadDialog /> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" ref="paginationRef" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { goods_userLists, goods_userDelete } from '@/api/repertory'
import { usePaging } from '@/hooks/usePaging'
import { getRoutePath } from '@/router'
import feedback from '@/utils/feedback'
import { timeFormat } from '@/utils/util'
import type { ElCard } from 'element-plus'
import Pagination from '@/components/pagination/index.vue'
// 商品编辑
import EditPopup from './operate.vue'
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)

const queryParams = reactive<any>({
    customer: '',
    mobile: '',
})
// 分页
const { pager, getLists, resetPage, resetParams } = usePaging({
	fetchFun: goods_userLists,
	params: queryParams,
})

// 删除库存
const handleDelete = async (id: any[] | number) => {
	await feedback.confirm('确定要删除？')
	await goods_userDelete({ id })
	getLists()
}


// 操作库存
const handleOperate = async (row: any, type: string) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open(type)
    editRef.value?.setFormData(row)
}


getLists()
</script>

<style scoped></style>